<template>
  <div class="jax-desc-item" :style="{ width: itemWidth }">
    <div class="jax-desc-label" :style="{ width: labelWidth }">
      {{ label }}
    </div>
    <div class="jax-desc-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'jax-desc-item',
  props: {
    label: {
      type: String,
    },
    value: {
      type: String,
    },
    itemWidth: null, // 组件宽度
    labelWidth: null, // 标签宽度
  },
  inject: ['jaxDesc'],
  computed: {
    itemWidth() {
      return this.itemWidth || this.jaxDesc.columnWidth
    },
    labelWidth() {
      return this.labelWidth || this.jaxDesc.labelWidth || '100px'
    },
  },
  created() {
    // console.log(this.jaxDesc.columnWidth)
  },
}
</script>

<style></style>
